<template>

	<van-nav-bar fixed placeholder>
		<template #left>
			<h2 class="nav-bar-title">分类</h2>
		</template>
	</van-nav-bar>

<div class="catePage">
	
	<div class="cateLeftBar">
		<p v-for="(item,index) in cate"  :key="item._id"
		:class="{'active':active===index}"
		@click="active = index"
		
		>{{item.name}}</p>
	</div>
	<div class="cateMain">
		 
		<div v-for="(item,index) in cate" :key="item._id" v-show="index==active" class="cateMainItem">
		
			<div v-for="item2 in item.children" :key="item2._id" >
				<router-link :to="'/goodsList/'+item2._id">
					
					<img width="80" height="80" :src="item2.icon" alt="" />
					<p>
						{{item2.name}}
					</p>
					
				</router-link>
			</div>
		</div>
		
	</div>
	
	
</div>





</template>

<script setup>
	import useCate from './hooks/useCate.js'
	const {cate,active} = useCate(0)
	
	// 加了keep-alive后 其他的生命周期只会在第一次时加载一下  以后再切换  不会运行了

	import {onActivated,onDeactivated} from 'vue'
	// oncreated  === onload
	// onmounted   ===    onready 
	// onActivated   === onshow 
	onActivated(()=>{
		console.log('激活了')
	})
	onDeactivated(()=>{
		console.log('失活了')
	})
</script>

<style>
	.catePage{
		height: calc(100% - 96px);
		background-color: #f5f5f5;
		display: flex;
	}
	.catePage .cateLeftBar{
		width: 100px;
		background-color: #fff;
		margin: 10px 10px 10px 0;
		overflow: scroll;
		
	}
	.catePage .cateMain{
		flex: 1;
		background-color: #fff;
		margin: 10px  0;
		overflow: scroll;
	}
	.catePage .cateLeftBar .active{
		background-color: #f5f5f5;
		color: var(--color);
	}
	.catePage .cateLeftBar p{
		padding: 10px 0 10px 8px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
	}
	.cateMainItem{
		display: flex;
		padding:  10px;
		
	}
	.cateMainItem > div{
		text-align: center;
		width: 50%;
		
	}
	
</style>